<template>
  <el-dialog
    title="自定义时间"
    :close-on-click-modal="false"
    append-to-body
    v-model="is_show"
    :before-close="beforeClose"
    width="550px"
    class="editPwd-page"
  >
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addFormRef"
      label-width="120px"
    >
      <el-form-item label="选择日期" prop="dateChar">
        <el-date-picker
          value-format="YYYY-MM-DD"
          v-model="dateChar"
          type="date"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item label="设置状态" prop="status">
        <el-radio-group v-model="status" class="ml-4">
          <el-radio label="1" size="large">休息日</el-radio>
          <el-radio label="0" size="large">工作日</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="beforeClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit()" v-loading="loading">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="more">
import {
  addDefineDay,
  delDefineDay,
  updateDefineDay
} from '@/api/businessSettings/business'
import { ref, reactive, computed, getCurrentInstance } from 'vue'
const loading = ref(false)
const addForm = reactive({
  dateChar: '',
  status: '1'
})
const { dateChar, status } = toRefs(addForm)
const rules = reactive({
  dateChar: [
    {
      required: true,
      message: '请选择日期',
      trigger: 'change'
    }
  ],
  status: [
    {
      required: true,
      message: '请选择设置状态',
      trigger: 'change'
    }
  ]
})
const addFormRef = ref()
const { proxy } = getCurrentInstance()
const is_show = computed(() => {
  return true
})

function beforeClose() {
  close()
}
function close() {
  proxy.$emit('closeDialog')
}
function handleSubmit() {
  console.log('addfrom===', addForm)
  proxy.$refs['addFormRef'].validate(valid => {
    if (valid) {
      loading.value = true
      addDefineDay(addForm)
        .then(res => {
          if (res.code == 200) {
            proxy.$modal.msgSuccess('添加成功!')
          }
          close()
          proxy.$emit('refreshList')
        })
        .catch(() => {
          close()
        })
    }
  })
}
</script>
<style lang="scss" scoped>
:deep .el-dialog__header {
  background-color: #eee;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
</style>
